<template>
	<div id="movie-tab">
		<ul>
			<router-link tag="li" to="/movie/city">
				北京<i class="fa fa-caret-down"></i>
			</router-link>
			<router-link class="font-color" tag="li" to="/movie/now">
				正在热映
			</router-link>
			<router-link class="font-color" tag="li" to="/movie/coming">
				即将上映
			</router-link>
			<router-link tag="li" to="/movie/search">
				<i class="fa fa-search"></i>
			</router-link>
		</ul>
		<router-view></router-view>
	</div>
</template>

<script>
</script>

<style scoped>
	#movie-tab{
		padding-top: 50px;	
	}
	ul{
		border-bottom: 1px solid #ccc;
	}
	li{
		display: inline-block;
		width: 25%;
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-weight: bold;
	}
	.font-color{
		color: #999;
	}
	.router-link-active{
		color: #E54847;
		border-bottom: 2px solid #E54847;
	}
	.fa-caret-down{
		margin-left: 5px;
	}
	.fa-search{
		font-size: 20px;
	}
</style>
